<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <link rel="icon" href="../../static/img/favicons/favicon.ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github-dark-dimmed.min.css">
  <title>bModal - esm - DEMO</title>
  <meta name="description"
        content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
  <meta name="keywords"
        content="Bootstrap,Bootstrap5,Modal,dynamic,backdrop,keyboard,focus,getInstance,getOrCreateInstance,show.bs.modal,shown.bs.modal,hide.bs.modal,hidden.bs.modal">
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?097448a07faa6124412179f6c9bfc688'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  </script>
</head>
<body>
<div class="container alert alert-primary alert-dismissible fade show" role="alert">
  <a class="alert-link small" href="../../docs/modal.html" target="_blank" title="docs/bModal">docs/bModal</a>
  <div class="small">
    <span class="small text-muted">If you are not a novice, you can click the link above for more detailed information.</span>
  </div>
  <button aria-label="Close" class="btn-close" data-bs-dismiss="alert" type="button"></button>
</div>
<div class="py-sm-5 min-vh-100 bg-primary bg-opacity-50">
  <div class="py-4 container border rounded">
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>modal-header</div>
        <span class="small text-muted">When empty, there will be no modal header</span>
      </div>
      <div class="input-group">
        <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="modalHeader">header</label>
        <input type="text" class="form-control" id="modalHeader" placeholder="" value="default header">
      </div>
      <div class="py-3">
        <div class="mb-2 form-check form-switch">
          <input class="form-check-input" id="headerFunctionSwitch" role="switch" type="checkbox">
          <label class="form-check-label" for="headerFunctionSwitch">Use Function control header content.</label>
        </div>
        <div class="w-75 input-group mb-3 d-none">
          <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="headerFunctionSelect">Function</label>
          <select class="form-select" id="headerFunctionSelect">
            <option value="returnHeader" selected>returnHeader</option>
            <option value="returnBody">returnBody</option>
            <option value="returnFooter">returnFooter</option>
            <option value="returnEmpty">returnEmpty</option>
            <option value="returnNull">returnNull</option>
            <option value="returnNaN">returnNaN</option>
            <option value="returnUndefined">returnUndefined</option>
            <option value="calcNumber">calcNumber</option>
            <option value="returnHTML_Element">returnHTML_Element</option>
          </select>
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>modal-body</div>
        <span class="small text-muted">When testing long content, please increase the content of the body to see the effect.</span>
      </div>
      <div class="input-group">
        <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="modalBody">body</label>
        <textarea class="form-control" id="modalBody" placeholder="Please enter content" rows="4">this is default body content.</textarea>
      </div>
      <div class="py-3">
        <div class="mb-2 form-check form-switch">
          <input class="form-check-input" id="bodyFunctionSwitch" role="switch" type="checkbox">
          <label class="form-check-label" for="bodyFunctionSwitch">Use Function control body content.</label>
        </div>
        <div class="w-75 input-group mb-3 d-none">
          <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="bodyFunctionSelect">Function</label>
          <select class="form-select" id="bodyFunctionSelect">
            <option value="returnHeader">returnHeader</option>
            <option value="returnBody" selected>returnBody</option>
            <option value="returnFooter">returnFooter</option>
            <option value="calcNumber">calcNumber</option>
            <option value="returnHTML_Element">returnHTML_Element</option>
          </select>
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>modal-footer</div>
        <span class="small text-muted"></span>
      </div>
      <div class="input-group">
        <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="modalFooter">footer</label>
        <textarea class="form-control" id="modalFooter" placeholder="Please enter content" rows="9">
<div>
<input type="button" class="btn btn-outline-success" data-bs-dismiss="modal" value="Close">
<button type="button" class="btn btn-primary" onclick="alert('Saved');">Save changes</button>
</div>
        </textarea>
      </div>
      <div class="py-3">
        <div class="mb-2 form-check form-switch">
          <input class="form-check-input" id="footerFunctionSwitch" role="switch" type="checkbox">
          <label class="form-check-label" for="footerFunctionSwitch">Use Function control footer content.</label>
        </div>
        <div class="w-75 input-group mb-3 d-none">
          <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="footerFunctionSelect">Function</label>
          <select class="form-select" id="footerFunctionSelect">
            <option value="returnHeader">returnHeader</option>
            <option value="returnBody">returnBody</option>
            <option value="returnFooter" selected>returnFooter</option>
            <option value="returnEmpty">returnEmpty</option>
            <option value="returnNull">returnNull</option>
            <option value="returnNaN">returnNaN</option>
            <option value="returnUndefined">returnUndefined</option>
            <option value="calcNumber">calcNumber</option>
            <option value="returnHTML_Element">returnHTML_Element</option>
          </select>
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div>Modal Sizes</div>
      <div class="input-group">
        <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="modalSizes">sizes</label>
        <select class="form-select" id="modalSizes">
          <option value="sm" title="modal-sm">sm</option>
          <option value="" title="default" selected>default None</option>
          <option value="lg" title="modal-lg">lg</option>
          <option value="xl" title="modal-xl">xl</option>
          <option value="full" title="modal-fullscreen">full</option>
          <option value="full-sm" title="modal-fullscreen-sm-down">full-sm</option>
          <option value="full-md" title="modal-fullscreen-md-down">full-md</option>
          <option value="full-lg" title="modal-fullscreen-lg-down">full-lg</option>
          <option value="full-xl" title="modal-fullscreen-xl-down">full-xl</option>
          <option value="full-xxl" title="modal-fullscreen-xxl-down">full-xxl</option>
          <option disabled value="custom" title="Custom class name">Custom class name (Don't show)</option>
        </select>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>Vertically Centered</div>
        <span class="small text-muted"></span>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" id="VerticallyCentered_true" name="VerticallyCentered" type="radio" value="true">
        <label class="form-check-label" for="VerticallyCentered_true" title="true">true</label>
      </div>
      <div class="form-check form-check-inline">
        <input checked class="form-check-input" id="VerticallyCentered_false" name="VerticallyCentered" type="radio" value="false">
        <label class="form-check-label" for="VerticallyCentered_false" title="default">false</label>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>Scrolling Long Content</div>
        <span class="small text-muted"></span>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" id="ScrollingLongContent_true" name="ScrollingLongContent" type="radio" value="true">
        <label class="form-check-label" for="ScrollingLongContent_true" title="true">true</label>
      </div>
      <div class="form-check form-check-inline">
        <input checked class="form-check-input" id="ScrollingLongContent_false" name="ScrollingLongContent" type="radio" value="false">
        <label class="form-check-label" for="ScrollingLongContent_false" title="default">false</label>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="mb-1">
        <div>Options</div>
        <span class="small text-muted"></span>
      </div>
      <div class="my-3 row align-items-center">
        <div class="col-4 col-sm-2 col-lg-1">backdrop</div>
        <div class="col">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="modalBackdrop" value='true' id="modalBackdrop_true" checked>
            <label class="form-check-label" for="modalBackdrop_true">true</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="modalBackdrop" value='false' id="modalBackdrop_false">
            <label class="form-check-label" for="modalBackdrop_false">false</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="modalBackdrop" value="static" id="modalBackdrop_static">
            <label class="form-check-label" for="modalBackdrop_static">"static"</label>
          </div>
        </div>
      </div>
      <div class="my-3 row align-items-center">
        <div class="col-4 col-sm-2 col-lg-1">keyboard</div>
        <div class="col">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="modalKeyboard" value="true" id="modalKeyboard_true" checked>
            <label class="form-check-label" for="modalKeyboard_true">true</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="modalKeyboard" value="false" id="modalKeyboard_false">
            <label class="form-check-label" for="modalKeyboard_false">false</label>
          </div>
        </div>
      </div>
      <div class="my-3 row align-items-center">
        <div class="col-4 col-sm-2 col-lg-1">focus</div>
        <div class="col">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="modalFocus" value="true" id="modalFocus_true" checked>
            <label class="form-check-label" for="modalFocus_true">true</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="modalFocus" value="false" id="modalFocus_false">
            <label class="form-check-label" for="modalFocus_false">false</label>
          </div>
        </div>
      </div>
    </div>
    <div class="my-4 p-4 border rounded">
      <div class="d-flex flex-column flex-md-row gap-2 gap-sm-3 gap-md-4">
        <div>
          <div class="mb-1">
            <div>Event Type</div>
            <span class="small text-muted">Events Type and Events Function must exist at the same time if used</span>
          </div>
          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-auto">
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" id="eventsType_show" name="eventsType" type="radio" value="show">
                <label class="form-check-label" for="eventsType_show" title="show.bs.modal">show</label>
              </div>
            </div>
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" id="eventsType_shown" name="eventsType" type="radio" value="shown">
                <label class="form-check-label" for="eventsType_shown" title="shown.bs.modal">shown</label>
              </div>
            </div>
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" id="eventsType_hide" name="eventsType" type="radio" value="hide">
                <label class="form-check-label" for="eventsType_hide" title="hide.bs.modal">hide</label>
              </div>
            </div>
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" id="eventsType_hidden" name="eventsType" type="radio" value="hidden">
                <label class="form-check-label" for="eventsType_hidden" title="hidden.bs.modal">hidden</label>
              </div>
            </div>
            <div class="my-1 my-lg-auto col">
              <div class="form-check">
                <input class="form-check-input" id="eventsType_hidePrevented" name="eventsType" type="radio" value="hidden">
                <label class="form-check-label" for="eventsType_hidePrevented" title="hidePrevented.bs.modal">hidePrevented</label>
              </div>
            </div>
          </div>
        </div>
        <span class="d-block d-md-none dropdown-divider border-light"></span>
        <span class="d-none d-md-block vr bg-white"></span>
        <div>
          <div class="mb-1">
            <div>Event Function</div>
            <span class="small text-muted">Events Type and Events Function must exist at the same time if used</span>
          </div>
          <div class="input-group">
            <label class="input-group-text bg-success bg-gradient text-opacity-50 text-white" for="eventsFunction">Functions</label>
            <select class="form-select" id="eventsFunction">
              <option value="" disabled selected>Choose...</option>
              <option value="eventsFunction_1">eventsFunction_1</option>
              <option value="eventsFunction_2">eventsFunction_2</option>
              <option value="eventsFunction_3">eventsFunction_3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <button class="my-4 mx-auto d-block btn btn-outline-primary bg-gradient" type="button" id="renderModal">Render Modal effect</button>
    <span class="d-block text-center small text-muted">hot key "Enter"</span>
  </div>
</div>
<div class="min-vh-100 bg-black bg-opacity-50">
  <div class="container">
    <span>Events Function code</span>
    <div>
        <pre>
          <code class="language-javascript language-plaintext" style="max-height: 70vh;">
function calcNumber() {
  return (1 + 2 + 3).toString()
}

function returnHeader() {
  return "function header"
}

function returnBody() {
  return "function body"
}

function returnFooter() {
  return "function footer"
}

function returnEmpty() {
  return ''
}

function returnNull() {
  return null
}

function returnNaN() {
  return NaN
}

function returnUndefined() {
  return undefined
}

function returnHTML_Element() {
  const html = document.createElement("div")
  const p = document.createElement("p")
  html.className = "bg-success"
  p.className = "text-center"
  p.innerHTML = "this is html obj."
  html.appendChild(p)
  return html
}

function eventsFunction_1() {
  alert('eventsFunction_1')
}

function eventsFunction_2() {
  alert('eventsFunction_2')
}

function eventsFunction_3() {
  console.log('eventsFunction_3')
}
          </code>
        </pre>
    </div>
  </div>
</div>

<script src="../../static/js/sampleFunctionCode.js" id="sampleFunctionCode"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
<script>hljs.highlightAll()</script>
<script type="module">
  // import {bModal} from 'https://cdn.jsdelivr.net/npm/b-components-js@0.0.3/dist/b.bundle.esm.js/+esm'
  import { bModal } from 'https://cdn.jsdelivr.net/npm/b-components-js@0.0.3/dist/bModal.esm.js/+esm'
  import {
    functionSwitch,
    getRadio,
    checkboxStatus,
    selectFunctionValue,
    selectValue
  } from '../../static/js/index.esm.js'

  functionSwitch('headerFunction')
  functionSwitch('bodyFunction')
  functionSwitch('footerFunction')

  document.querySelector('#renderModal').addEventListener('click', renderResult)
  enterRender()

  function renderResult() {
    const header = checkboxStatus('headerFunction') ? selectFunctionValue('headerFunction') : selectValue('modalHeader')
    const body = checkboxStatus('bodyFunction') ? selectFunctionValue('bodyFunction') : selectValue('modalBody')
    const footer = checkboxStatus('footerFunction') ? selectFunctionValue('footerFunction') : selectValue('modalFooter')
    const ModalSizes = selectValue('modalSizes')
    const VerticallyCentered = getRadio('VerticallyCentered')
    const ScrollingLongContent = getRadio('ScrollingLongContent')
    const eventsType = getRadio('eventsType')
    const eventsFunctionSelect = selectValue('eventsFunction')
    const eventsFunction = eventsFunctionSelect ? eval(eventsFunctionSelect) : ''
    const Options = {
      backdrop: getRadio('modalBackdrop'),
      keyboard: getRadio('modalKeyboard'),
      focus: getRadio('modalFocus')
    }

    const x = bModal(header, body, footer, ModalSizes, VerticallyCentered, ScrollingLongContent, Options, eventsType, eventsFunction)
    console.log('The return value of the current Modal : ', x)
  }

  function enterRender() {
    document.body.addEventListener('keyup', (e) => {
      if (e.code === 'Enter' || e.code === 'NumpadEnter') {
        e.preventDefault()
        renderResult()
      }
    })
  }
</script>
</body>
</html>